<!-- 
 1. 
 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: pink;
        }

        .conter {
            width: 100vw;
            display: flex;

        }

        .conter2 {
            width: 100vw;
            display: flex;
        }

        [class^="d"] {
            margin-top: 60px;
            margin-left: 10px;
            width: 150px;
            height: 150px;
            flex-grow: 1;
            position: relative;

        }

        [class^="d"]>img {
            border-radius: 10px;

        }

        @media screen and(max-width:660) {

            .conter,
            .conter2 {
                width: 100vw;
                display: flex;
            }
        }

        span img {
            position: absolute;
            top: 1px;
            left: -17px;
            width: 16px;

        }

        span {
            position: absolute;
            top: 123px;
            left: 33px;
            color: whitesmoke;
        }

        .p1 {
            margin-top: -3px;
            margin-left: 5px;
        }

        .p2 {
            margin-top: -10px;
            margin-left: 5px;
        }
    </style>
</head>

<body>
    <div class="conter">
        <div class="d1"><img src="https://oss.9ihub.com/test/flex-01.jpg" alt="">
            
            <p class="p1">噢，谢特谢特谢特~</p>
            <p class="p2">噢法克法克法克~</p><span class="s1"><img src="./img/三角形图标.png" alt="" class="i1">900万</span>
        </div>
        <div class="d2"><img src="https://oss.9ihub.com/test/flex-02.jpg" alt="">
            <p class="p1">噢，谢特谢特谢特~</p>
            <p class="p2">噢法克法克法克~</p><span class="s2"><img src="./img/三角形图标.png" alt="" class="i2">900万</span>
        </div>
        <div class="d3"><img src="https://oss.9ihub.com/test/flex-03.jpg" alt="">
            <p class="p1">噢，谢特谢特谢特~</p>
            <p class="p2">噢法克法克法克~</p><span class="s3"><img src="./img/三角形图标.png" alt="" class="i3">900万</span>
        </div>
        <div class="d4"><img src="https://oss.9ihub.com/test/flex-04.jpg" alt="">
            <p class="p1">噢，谢特谢特谢特~</p>
            <p class="p2">噢法克法克法克~</p><span class="s4"><img src="./img/三角形图标.png" alt="" class="i4">900万</span>
        </div>
    </div>
    <div class="conter2">
        <div class="d5"><img src="https://oss.9ihub.com/test/flex-05.jpg" alt="">
            <p class="p1">噢，谢特谢特谢特~</p>
            <p class="p2">噢法克法克法克~</p><span class="s5"><img
                    src="./img/三角形图标.png" alt="" class="i5">900万</span></div>
        <div class="d6"><img src="https://oss.9ihub.com/test/flex-06.jpg" alt="">
            <p class="p1">噢，谢特谢特谢特~</p>
            <p class="p2">噢法克法克法克~</p><span class="s6"><img
                    src="./img/三角形图标.png" alt="" class="i6">900万</span></div>
        <div class="d7"><img src="https://oss.9ihub.com/test/flex-07.jpg" alt="">
            <p class="p1">噢，谢特谢特谢特~</p>
            <p class="p2">噢法克法克法克~</p><span class="s7"><img
                    src="./img/三角形图标.png" alt="" class="i7">900万</span></div>
        <div class="d8"><img src="https://oss.9ihub.com/test/flex-08.jpg" alt="">
            <p class="p1">噢，谢特谢特谢特~</p>
            <p class="p2">噢法克法克法克~</p><span class="s8"><img
                    src="./img/三角形图标.png" alt="" class="i8">900万</span></div>
    </div>
</body>

</html> -->



<!-- 
2. 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            width: 500px;
            height: 50px;
            display: flex;
            justify-content: space-between;
        }

        .left {
            width: 112px;

            background-image: url(./img/红色播放键.png);
            background-repeat: no-repeat;
            background-size: 38px;
            padding-left: 48px;
            padding-top: 0px;
            font-size: 28px;
            font-weight: 500;
        }

        .right {
            background-image: url(./img/重试键.png);
            font-size: 28px;
            font-weight: 500;
            background-repeat: no-repeat;
            padding-left: 48px;
            background-size: 36px;
            background-position: 3px 6px;
            padding-top: 2px;
        }

        .center {
            width: 500px;
            height: 150px;
            display: flex;
            margin-bottom: 31px;
        }

        img {
            width: 200px;
            height: 150px;

        }

        p:nth-child(1) {
            font-size: 25px;
            margin-top: 0px;
            margin-left: 16px;
        }

        p:nth-child(2) {
            width: 87px;
            margin-left: 17px;
            font-size: 19px;
            color: red;
            margin-top: -15px;
            border: 1px solid;
            border-radius: 5px;
            background-color: pink;
            text-align: center;
            justify-items: center;
        }

        p:nth-child(3) {
            margin-left: 15px;
            margin-top: -6px;
            display: flex;
            justify-content: space-between;
            margin-right: 12px;
            color: gray;
            font-size: 19px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="top">
            <div class="left">热门视频</div>
            <div class="right">换一换</div>
        </div>
        <div class="center">
            <img src="./img/鱼肉.jpeg" alt="">
            <div class="d1">
                <p>无论做什么鱼：最忌放盐和料酒研制</p>
                <p>1万评论</p>
                <p>148万次观看<span>司马南频道</span></p>
            </div>
            
        </div>
           <div class="center">
            <img src="./img/鱼肉.jpeg" alt="">
            <div class="d1">
                <p>无论做什么鱼：最忌放盐和料酒研制</p>
                <p>1万评论</p>
                <p>148万次观看<span>司马南频道</span></p>
            </div>
            
        </div>
        <div class="center">
            <img src="./img/鱼肉.jpeg" alt="">
            <div class="d1">
                <p>无论做什么鱼：最忌放盐和料酒研制</p>
                <p>1万评论</p>
                <p>148万次观看<span>司马南频道</span></p>
            </div>
            
        </div>
        <div class="center">
            <img src="./img/鱼肉.jpeg" alt="">
            <div class="d1">
                <p>无论做什么鱼：最忌放盐和料酒研制</p>
                <p>1万评论</p>
                <p>148万次观看<span>司马南频道</span></p>
            </div>
            
        </div>

</body>

</html> -->




<!--
3. 
 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .box {
            display: flex;
            justify-content: space-between;
            
        }

        .top {
            width: 100vw;
            height: 40px;
            background-color: antiquewhite;
            text-align: center;
            line-height: 40px;

        }

        .left {
            width: 400px;
            height: 600px;
            background-color: green;
            text-align: center;
            line-height: 100vh;

        }

        .right {
            width: 400px;
            height: 600px;
            background-color: purple;
            text-align: center;
            line-height: 100vh;


        }

        .center {
            width: 100%;
            height: 600px;
            background-color: whitesmoke;
            text-align: center;
            line-height: 100vh;

        }

        .bottom {
            width: 100vw;
            height: 40px;
            background-color: grey;
            text-align: center;
            line-height: 40px;
        }

        @media (max-width:600px) {
          .box{
            display: flex;
            flex-direction: column;
          }
          .left {
            width: 100vw;
            height: 100px;
            background-color: green;
            text-align: center;
            line-height: 100px;

        }

        .right {
            width: 100vw;
            height: 100px;
            background-color: purple;
            text-align: center;
            line-height: 100px;


        }

        .center {
            width: 100vw;
            height: 100px;
            background-color: whitesmoke;
            text-align: center;
            line-height: 100px;

        }
        }
    </style>
</head>

<body>

    <div class="top">一天到晚游泳的鱼</div>
    <div class="box">
        <div class="left">左侧</div>
        <div class="center">中间</div>
        <div class="right">右侧</div>
    </div>
    <div class="bottom">向天再借五百年</div>

</body>

</html> -->


<!--
4.  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            background-color: rgb(162, 243, 162);
        }
        .box{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 800px;
            height: 600px;
            border: 1px solid;
            justify-items: center;
            justify-content: center;
            background-color: rgba(255, 255, 255, 0.747);
            
            

        }
        .top{
            background-color:rgb(162, 243, 162) ;
            width: 760px;
            height: 120px;
            margin: 20px;
            border: 1px solid;
            display: flex;
            justify-content: flex-start
            
            
        }
        .z1,.z2,.z3,.z4{
 
            width: 80px;
            height: 80px;
            margin-top: 20px;
            margin-bottom: 20px;
            margin-left: 20px; 
            border: 1px solid;
            background-color: rgba(255, 255, 255, 0.747);
        }
        .z5{
            width: 80px;
            height: 80px;
            margin: 20px;
            margin-left: 253px;
            border: 1px solid;
            background-color: rgba(255, 255, 255, 0.747);
        }

        .center{
            background-color:rgb(162, 243, 162) ;
            width: 760px;
            height: 415px;
            border: 1px solid;
            margin: 20px;
            display: flex;

        }
        .left{
            width: 220px;
            height: 365px;
            margin-left: 20px; 
            margin-top: 15px;
        }
        .c{
            width: 220px;
            height: 300px;
            border: 1px solid;
            background-color: rgba(255, 255, 255, 0.747);
        }
        .left [class^="z"]{
          width: 50px;
          height: 50px;
          margin-top: 15px;
          border: 1px solid;
          background-color: rgba(255, 255, 255, 0.747);
        }

        .li{
            display: flex;
            justify-content: space-between;
            justify-items: center;
        }


        .right{
        width:480px ;
        height: 370px;
           margin-left: 20px;

        }
        .r{
            width: 480px;
            height: 38px;
            margin-top: 15px;
            border: 1px solid;
            background-color: rgba(255, 255, 255, 0.747);
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="top">
            <div class="z1"></div>
            <div class="z2"></div>
            <div class="z3"></div>
            <div class="z4"></div>
            <div class="z5"></div>
        </div>
        <div class="center">
            <div class="left">
                <div class="c"></div>
                <div class="li">
                    <div class="z"></div>
                    <div class="z"></div>
                    <div class="z"></div>
                </div>

            </div>
            <div class="right">
                <div class="r"></div>
                <div class="r"></div>
                <div class="r"></div>
                <div class="r"></div>
                <div class="r"></div>
                <div class="r"></div>
                <div class="r"></div>
            </div>
        </div>
    </div>
</body>
</html> -->


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .box {
            width: 390px;
            height: 150vh;
        }

        .top {
            width: 390px;
            height: 48px;
            display: flex;
        }

        .X {
            width: 294px;
            height: 48px;
            background-image: url(./img/京东大X.png);
            background-color: rgb(51, 52, 51);
            background-repeat: no-repeat;
            background-size: 10px;
            background-position: 11px 18px;
            position: relative;
        }

        .X img {
            width: 40px;
            margin-left: 35px;
            margin-top: 5px;
        }

        .X span {
            position: absolute;
            left: 109px;
            top: 16px;
            color: rgb(252, 252, 252);
            font-size: 12px;
        }

        .DaKai {

            width: 96px;
            height: 48px;
            background-color: #f43515;
        }

        .DaKai span {
            color: white;
            position: relative;
            top: 13px;
            left: 15px;
        }


        .content {

            width: 390px;
            height: 334px;
            background-color: #c30a0b;
        }

        .DengLu {
            background-color: #c30a0b;
            position: sticky;
            top: 0px;
            left: 0px;
            width: 390px;
            height: 43px;
            background-image: url(./img/京东三条横杠.png);
            background-repeat: no-repeat;
            background-size: 25px;
            background-position: 13px 10px;

            
        }
        .DengLu img{
            width: 21px;
            position: absolute;
            top: 13px;
            left: 56px;
            z-index: 2;
        }

        .DengLu input{
            width: 260px;
            height: 27px;
            position: absolute;
            top: 7px;
            left: 50px;
            border-radius: 16px;
            border: 0px;
          
        }
        .SouSuo{
            position: absolute;
            top: 7px;
            left: 80px;
            z-index: 2;
            display: inline-block;
            width: 26px;
            height: 26px;
            background-image: url(./img/JD大杂烩.png);
            background-repeat: no-repeat;
            background-size: 224px;
            background-position: -88px 6px;
        }
        .DengLu .right{
            color: white;
            position: absolute;
            top: 9px;
            left: 329px;
        }

        .banare {
            width: 390px;
            height: 156px;
        }

        .banare img {
            width: 390px;
        }

        .iphone{
            margin-top: 4px;
            width: 390px;
            height: 130px;
            display: flex;
        }
        .iphone img{
            width: 185px;
        }


        .CaiDanLan{
            width: 390px;
          height: 160px;

        }
        .meue1,.meue2{
            height: 80px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
        .meue1 div{
            width: 40px;
            height: 40px;
            background-size: 46px;
            background-repeat: no-repeat;

        }
        .meue1 div:nth-child(1){
            background-image: url(./img/JD-超市.png);
            background-position: -4px -3px;
        }
        .meue1 div:nth-child(2){
            background-image: url(./img/JD-3C.png);
            background-position: -3px 0px;
        }
        .meue1 div:nth-child(3){
            background-image: url(./img/JD-衣服.png);
            background-position: -3px -2px;
        }
        .meue1 div:nth-child(4){
            background-image: url(./img/JD-蔬菜栏.png);
            background-position: -3px -2px;
        }
        .meue1 div:nth-child(5){
            background-image: url(./img/JD-1小时.png);
            background-position: -2px -3px;
        }
        .meue2 div{
            width: 40px;
            height: 40px;
            background-size: 46px;
            background-repeat: no-repeat;
            background-image: url(./img/JD-充值.png);
            background-position: -3px -3px;

        }
        .meue2 div:nth-child(1){
            background-image: url(./img/JD-充值.png);
          
        }
        .meue2 div:nth-child(2){
            background-image: url(./img/JD-快递车.png);

        }
        .meue2 div:nth-child(3){
            background-image: url(./img/JD-券.png);

        }
        .meue2 div:nth-child(4){
            background-image: url(./img/JD-红包.png);

        }
        .meue2 div:nth-child(5){
            background-image: url(./img/JD-皇冠.png);

        }


        .MiaoSha{
            margin-top: 20px;
            width: 390px;
            height: 130px;
            
        }
        .JingDong {
            display: flex;
            justify-content: space-between;
            font-weight: 900;
        }
        .JingDong span{
            background-image: url(./img/点场.png);
            background-repeat: no-repeat;
            background-size: 21px;
            background-position: 109px 0px;
        }
        .JingDong img{
            width: 20px;
           margin-top: 2px;
           margin-right: 2px;
        }
        .JiaGe{
            display: flex;
            position: relative;
            top: 20px;
            color: red;
        }
       .JiaGe img{
        width: 63px;
       }
       


        .NianHuo{
            margin-top: 20px;
            width: 390px;
            height: 170px;
            display: flex;
        }
        .NianHuo img{
            width: 197px;
        }

        .DaoHangLan{
             position: fixed;
             top: 587px;
             left: 0px;
            width: 390px;
            height: 65px;
            display: flex;
            justify-content: space-evenly;
            align-items: flex-end;
            background-color: white;
            
        }
        .DaoHangLan div{
            color:#8e8c8a ;
        }

    </style>
</head>

<body>
    <div class="box">
        <div class="top">
            <div class="X">
                <img src="./img/京东logo.png" alt="">
                <span>打开京东APP，购物更轻松</span>
            </div>
            <div class="DaKai">
                <span>立即打开</span>
            </div>
        </div>
        <div class="content">
            <div class="DengLu">
                    <img src="./img/JD图标.png" alt="">
                    <span class="SouSuo"></span>
                    <input type="text" placeholder="                  键盘鼠标套装"> 
                    <span class="right">登录</span>         
            </div>
            <div class="banare">
                <img src="https://oss.9ihub.com/test/jdh5-banner.png" alt="">
            </div>
            <div class="iphone">
                <img src="./img/JD蓝牙耳机.png" alt="">
                <img src="./img/JD手表.png" alt="">
                <img src="./img/JD方太油烟机.png" alt="">
            </div>
        </div>
        <div class="CaiDanLan">
            <div class="meue1">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="meue2">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="MiaoSha">
            <div class="JingDong">
                <span>京东秒杀&nbsp;&nbsp;&nbsp;18&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多秒杀</span>
                <img src="./img/JD大于号.png" alt="">
            </div>
            <div class="JiaGe">
                <div><img src="./img/JD书.jpg" alt="">￥&nbsp;25</div>
                <div><img src="./img/JD椅子.jpg" alt="">￥&nbsp;2568</div>
                <div><img src="./img/JD零食大礼包.jpg" alt="">￥&nbsp;28.8</div>
                <div><img src="./img/JD厕所清洁剂.jpg" alt="">￥&nbsp;19.7</div>
                <div><img src="./img/JD草莓.jpg" alt="">￥&nbsp;420</div>
                <div><img src="./img/JD头套.jpg" alt="">￥&nbsp;42.9</div>
            </div>
        </div>
        <div class="NianHuo">
            <img src="./img/JD五常大米.webp" alt="">
            <img src="./img/JD乳玉皇妃.webp" alt="">
        </div>
        <div class="DaoHangLan">
            <div>首页</div>
            <div>分类</div>
            <div>京喜</div>
            <div>购物车</div>
            <div>未登录</div>
        </div>
    </div>

</body>

</html>